 <!-- 基本table表格加查询条件 -->
<template>
  <div class="main">
    <div class="search-bar">
      <el-form>
        <el-form-item>
          <el-button type="primary" @click="openUpload">车型导入</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="search" class="search-form">
        <el-form-item label="企业名称:">
          <el-input
            v-model="search.account"
            placeholder="请输入企业名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="系族名称:">
          <el-input
            v-model="search.nickname"
            placeholder="请输入系族名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="缺陷分类:">
          <el-select v-model="search.status" placeholder=" ">
            <el-option label="全部" value=""></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- 发现时间 -->
        <el-form-item label="发现时间:">
          <el-date-picker
            v-model="search.startTime"
            type="datetime"
            placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="searchClick"
            >搜索</el-button
          >
          <el-button @click="resetClick">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-wrap">
      <el-table
        :data="tableData"
        border
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="cxxh" label="车型型号"></el-table-column>
        <el-table-column prop="flbh" label="附录编号">
          <template slot-scope="scope">
            <a :href="'#/cxgl/cxqd_fl_detail/' + scope.row.id">{{
              scope.row.flbh
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="fl_status" label="附录状态" width="120">
          <template slot-scope="scoped">
            <span v-if="scoped.row.fl_status == 0">--/--</span>
            <span v-if="scoped.row.fl_status == 1">未备案</span>
            <span v-if="scoped.row.fl_status == 2">已申请</span>
            <span v-if="scoped.row.fl_status == 3">已审核待备案</span>
            <span v-if="scoped.row.fl_status == 4">已备案</span>
            <span v-if="scoped.row.fl_status == 5">被打回</span>
            <span v-if="scoped.row.fl_status == 6">已公开</span>
            <span v-if="scoped.row.fl_status == 7">待入库</span>
          </template>
        </el-table-column>
        <el-table-column prop="fl_tbzt" label="同步状态" width="120">
          <template slot-scope="scoped">
            <span v-if="scoped.row.fl_tbzt == 0" class="red">待同步</span>
            <span v-if="scoped.row.fl_tbzt == 1">已同步</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="fl_upload_time"
          label="附件上传时间"
          :formatter="formatCreateTime"
        >
        </el-table-column>

        <el-table-column label="操作" width="280">
          <template slot-scope="scope">
            <el-button @click="showDetail(scope.row)" type="text" size="mini"
              >查看</el-button
            >
            <el-button @click="showEdit(scope.row)" type="text" size="mini"
              >编辑</el-button
            >
            <el-button @click="handleDelete(scope.row)" type="text" size="mini"
              >删除</el-button
            >
            <el-button  type="text" size="mini"
              >文件上传记录</el-button
            >
            <el-button @click="handleAsync(scope.row)" type="text" size="mini"
              >同步</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-wrap">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <Upload :show.sync="showUpload"></Upload>
  </div>
</template>
<script>
import { api } from "../../api/table.js";
import upload from "../../components/upload.vue";
export default {
  components: {
    Upload: upload,
  },
  data() {
    return {
      search: {
        account: "",
        nickname: "",
        status: "",
        startTime: "",
      },
      //show上传控件
      showUpload: false,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pageSizes: [10, 20, 30, 40, 50],
      loading: false,
    };
  },
  methods: {
    //打开上传控制
    openUpload() {
      this.showUpload = true;
    },
    //查看详情
    showDetail(row) {
      this.$router.push({
        path: "/cxgl/cxqd_detail",
        query: {
          id: row.id,
        },
      });
    },
    //编辑
    showEdit(row) {
      this.$router.push({
        path: "/cxgl/cxqd_edit",
        query: {
          id: row.id,
        },
      });
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getTableData();
    },
    searchClick() {
      this.currentPage = 1;
      this.getTableData();
    },
    resetClick() {
      this.search = {
        account: "",
        nickname: "",
        status: "",
      };
      this.currentPage = 1;
      this.getTableData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(row) {
      this.$router.push({
        name: "cxgl_cxqd_edit",
        params: {
          id: row.id,
        },
      });
    },
    handleAsync(row) {
      this.$confirm("是否确认同步?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        api
          .deleteUser({
            id: row.id,
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getTableData();
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        api
          .deleteUser({
            id: row.id,
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getTableData();
          })
          .finally(() => {
            this.loading = false;
          });
      });
    },
    getTableData() {
      this.loading = true;
      api
        .get_cxqd_list({
          page: this.currentPage,
          page_size: this.pageSize,
          account: this.search.account,
          nickname: this.search.nickname,
          status: this.search.status,
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    formatStatus(row, column) {
      if (row.fl_status == 0) {
        return "未申请";
      } else if (row.fl_status == 1) {
        return "正在申请";
      } else if (row.fl_status == 2) {
        return "已通过";
      } else if (row.fl_status == 3) {
        return "被拒绝";
      }
    },
    formatCreateTime(row, column) {
      return this.$moment(row.fl_upload_time).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  created() {
    this.getTableData();
  },
};
</script>
<style lang="scss" scoped>
.main {
  padding: 20px;
  .red {
    color: red;
  }
  //search-form flex布局且允许换行
  .search-form {
    display: flex;
    margin: 20px 0;
    //flex-wrap: wrap;
    .el-form-item {
      width: 100%;
      display: flex;
      margin: 0;
      .el-form-item__label {
        flex: 0;
      }
      .el-input {
        width: 100%;
      }
    }
  }
}
.page-wrap {
  padding: 20px;
  text-align: right;
}
</style>

